<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @add="showAdd"
      @edit="showUpdate"
    >
      <template #filter-content>

        <el-date-picker
          v-model="listQuery.params.startTime"
          class="filter-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="考试开始时间"
          size="small"
        />

        <el-date-picker
          v-model="listQuery.params.endTime"
          class="filter-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="考试结束时间"
          size="small"
        />

        <el-input v-model="listQuery.params.title" placeholder="搜索考试名称" style="width: 200px;" size="small" class="filter-item" />

      </template>

      <template #data-columns>

        <el-table-column
          label="考试名称"
          prop="title"
          show-overflow-tooltip>

          <template v-slot="scope">
            <detail-link :id="scope.row.id" :title="scope.row.title" permission="exam:update" @click="showUpdate" />
          </template>

        </el-table-column>


        <el-table-column
          label="考试时间"
          align="center"
          show-overflow-tooltip
        >

          <template v-slot="scope">
            {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
          </template>

        </el-table-column>

        <el-table-column
          label="考试总分"
          prop="totalScore"
          align="center"
          width="100px"
        />

        <el-table-column
          label="及格分"
          prop="qualifyScore"
          align="center"
          width="100px"
        />

        <el-table-column
          label="状态"
          align="center"
          width="120px"
        >

          <template v-slot="scope">
            {{ scope.row.state | stateFilter }}
          </template>

        </el-table-column>

        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="280px"
        >
          <template v-slot="scope">
            <el-link v-permission="['exam:offline:record:import']" style="margin-left: 10px" type="primary" icon="el-icon-upload2" @click="showImport(scope.row.id)">导入成绩</el-link>
            <el-link v-permission="['exam:offline:record:list']" style="margin-left: 10px" type="primary" icon="el-icon-document" @click="showRecords(scope.row.id)">成绩列表</el-link>
          </template>
        </el-table-column>

      </template>

    </data-table>

    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :visible.sync="dialogVisible"
      title="考试管理"
      width="600px"
    >

      <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="120px">

        <el-form-item label="考试名称" prop="title">
          <el-input v-model="postForm.title" size="small" />
        </el-form-item>


        <el-form-item label="考试总分" prop="totalScore">
          <el-input-number :min="0" v-model="postForm.totalScore" :precision="1" size="small" />
        </el-form-item>


        <el-form-item label="及格分" prop="qualifyScore">
          <div style="display: flex; align-items: center; justify-content: space-between">
            <el-input-number :min="0" v-model="postForm.qualifyScore" :max="postForm.totalScore" :precision="1" size="small" />
            <el-checkbox v-if="postForm.id" v-model="postForm.calcPass">重算通过状态</el-checkbox>
          </div>
        </el-form-item>


        <el-form-item label="考试时间" prop="startTime">
          <date-time-picker :start-time.sync="postForm.startTime" :end-time.sync="postForm.endTime"/>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>

    </el-dialog>


    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="importDialog"
      title="导入成绩"
      width="30%"
    >

      <el-descriptions :column="1" border>
        <el-descriptions-item label="导入文件">
          <import-excel
            :data="{ examId: examId}"
            title="成绩"
            action="/api/exam/exam/score/import"
            template="/api/exam/exam/score/template"
            @success="importSuccess"
          />
        </el-descriptions-item>
      </el-descriptions>

      <el-row />

    </el-dialog>

  </div>

</template>

<script>
import permission from '@/directive/permission/index.js'
import ShareExamDialog from '@/views/admin/exam/exam/components/ShareExamDialog'
import { fetchDetail, saveData } from '@/api/exam/exam'
import DateTimePicker from '@/components/DateTimePicker/index.vue'

export default {
  name: 'ExamOffline',
  components: { DateTimePicker, ShareExamDialog },
  directives: { permission },
  data() {
    return {

      dialogVisible: false,
      postForm: {
        calcPass: false
      },
      rules: {
        title: [
          { required: true, message: '考试名称不能为空！' }
        ],
        totalScore: [
          { required: true, message: '总分数不能为空！' }
        ],
        qualifyScore: [
          { required: true, message: '及格分不能为空！' }
        ],
        startTime: [
          { required: true, message: '考试时间不能为空！' }
        ]
      },

      importDialog: false,

      listQuery: {
        current: 1,
        size: 10,
        params: {
          offline: true
        }
      },

      options: {
        add: {
          enable: true,
          permission: 'exam:offline:add'
        },
        edit: {
          enable: true,
          permission: 'exam:offline:update'
        },
        delete: {
          enable: true,
          permission: 'exam:offline:delete',
          url: '/api/exam/exam/delete'
        },
        // 可批量操作
        multi: true,
        // 列表请求URL
        listUrl: '/api/exam/exam/paging'
      },

      examId: ''
    }
  },

  activated() {
    this.$refs.pagingTable.refresh()
  },

  methods: {

    showAdd() {
      this.postForm = {
        title: '',
        totalScore: 0,
        qualifyScore: 0,
        // 显示试卷明细
        resultType: 3,
        offline: true
      }
      this.dialogVisible = true
    },

    showUpdate(id) {
      fetchDetail(id).then(res => {
        this.postForm = res.data
        this.$set(this.postForm, 'calcPass', false)
      })
      this.dialogVisible = true
    },

    handleSave() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }
        saveData(this.postForm).then(() => {
          this.$notify({
            title: '成功',
            message: '考试保存成功！',
            type: 'success',
            duration: 2000
          })

          this.dialogVisible = false
          this.$refs.pagingTable.getList()
        })
      })
    },

    // 成绩列表
    showRecords(id) {
      this.$router.push({ name: 'ExamOfflineRecords', query: { examId: id }})
    },

    showImport(examId) {
      this.examId = examId
      this.importDialog = true
    },

    importSuccess() {
      this.importDialog = false
      this.$refs.pagingTable.getList()
    }
  }
}
</script>
